<!--
 * @Author: 贺楠 1071780426@qq.com
 * @Date: 2024-09-12 10:19:53
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-10-15 16:23:12
 * @FilePath: \newMould_BHZ\src\views\bigScreen\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 贺楠 1071780426@qq.com
 * @Date: 2024-09-12 10:19:53
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-09-12 10:45:08
 * @FilePath: \newMould_BHZ\src\views\bigScreen\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="bighome">
    <div class="commonLayout">
      <div class="fristTitle">
        <div class="thData">
          <div class="td">温度：20±2℃</div>
          <div class="hd">湿度：≥95%</div>
        </div>
        <div class="title">{{ formData.fCompanyname }}</div>
        <div class="placeholder"></div>
      </div>
      <div class="bgtitle">{{ formData.fCompanyshortname }}</div>
      <div class="commonData">
        <div class="statisticsData">
          <div class="totallData">总储存量:{{ formData.allCount }}</div>
          <div class="alreadylistedData">已上架:{{ formData.useCount }}</div>
          <div class="notListedYetData">未上架:{{ formData.unuseCount }}</div>
        </div>
        <div class="line"></div>
        <div class="symbolicIcon">
          <div class="iconText">
            <img src="@/assets/img/bigscreen/notExpiredIcon.png" alt="" />
            <div class="notExpired">未过期</div>
          </div>
          <div class="iconText">
            <img src="@/assets/img/bigscreen/testIcon.png" alt="" />
            <div class="test">可试验</div>
          </div>
          <div class="iconText">
            <img src="@/assets/img/bigscreen/expiredIcon.png" alt="" />
            <div class="expired">已过期</div>
          </div>
        </div>
        <div class="line"></div>
        <div
          class="symbolicData mobile-marquee-wrapper"
          id="myElement"
          ref="wrapper"
        >
          <div
            class="mobile-marquee-text"
            ref="text"
            v-if="formData.useMsg.length < 30"
          >
            {{ formData.useMsg }}
          </div>
          <div
            v-else
            class="mobile-marquee-text"
            ref="text"
            :style="{ left: textLeft, transition: textTransition }"
          >
            {{ formData.useMsg }}
          </div>
        </div>
        <div class="line"></div>
        <div class="temperatureAndHumidity">
          <div class="temperatureIcon">
            <img src="@/assets/img/bigscreen/temperature.png" alt="" />
            <div class="temperature">21.3℃</div>
          </div>
          <div class="humidityIcon">
            <img src="@/assets/img/bigscreen/humidity.png" alt="" />
            <div class="humidity">21.3℃</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tableLayout">
      <el-carousel :interval="10000" arrow="always" :autoplay="false">
        <el-carousel-item v-for="(item, index) in tableDataA" :key="index">
          <div class="table_A tableCommon">
            <!-- 参数名称、列数根据实际情况调整 -->
            <div class="table_body">
              <div class="table_th">
                <div class="layer">层数</div>
                <div class="tr1 th_style">
                  {{ item.shelf1.name }}
                </div>
                <div class="tr2 th_style">
                  {{ item.shelf2.name }}
                </div>
                <div class="tr3 th_style">
                  {{ item.shelf3.name }}
                </div>
                <div class="tr4 th_style">
                  {{ item.shelf4.name }}
                </div>
                <div class="tr5 th_style">
                  {{ item.shelf5.name }}
                </div>
              </div>
              <div class="table_main_body">
                <div class="layers">
                  <div
                    class="layerData"
                    v-for="(layer, layerNum) in item['shelf' + (index + 1)]
                      .layer"
                    :key="layerNum"
                    :style="{
                      background:
                        layerNum % 2 == 0
                          ? 'rgba(255,255,255,0.1)'
                          : 'transparent',
                    }"
                  >
                    {{ layerNum + 1 }}
                  </div>
                </div>
                <div class="ld" v-for="s in 5" :key="s">
                  <div
                    class="layertrdata"
                    v-for="(layer, layerNum) in item['shelf' + s].layer"
                    :key="layerNum"
                    :style="{
                      background:
                        layerNum % 2 == 0
                          ? 'rgba(255,255,255,0.1)'
                          : 'transparent',
                    }"
                  >
                    <div
                      class="tr2 tr"
                      v-for="(layerSample, k) in layer.sample"
                      :key="k"
                    >
                      <div class="iconText">

                            <el-tooltip
                          placement="top"
                          v-if="layerSample.status != 0"
                        >
                         <div slot="content">
                            试件编号:{{ layerSample.testCode }}<br />样品编号:{{
                              layerSample.sampleCode
                            }}<br />取样编号:{{ layerSample.sampleNoStr
                            }}<br />制件日期:{{ layerSample.fProductionDates
                            }}<br />工程部位:{{ layerSample.fProjectLocation }}
                          </div>
                        <div class="h"  >
                            <img
                            :src="
                              layerSample.status == 1
                                ? notExpired
                                : layerSample.status == 2
                                ? test:expired
                            "
                            alt=""
                          />
                          <div :style="{'color':layerSample.status == 1?'#58EC8E' : layerSample.status == 2?'#FFD456':'#FE5858'}">{{ k + 1 }}</div>
                        </div>
                        </el-tooltip>
                        <div class="h" v-else>
                          <img
                            :src="k1"
                            alt=""
                          />
                          <div style="color:#A6BAC9"> {{ k + 1 }}</div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table_B tableCommon">
            <div class="table_body">
              <div class="table_th">
                <div class="layer">层数</div>
                <div class="tr1 th_style">
                  {{ item.shelf6.name }}
                </div>
                <div class="tr2 th_style">
                  {{ item.shelf7.name }}
                </div>
                <div class="tr3 th_style">
                  {{ item.shelf8.name }}
                </div>
                <div class="tr4 th_style">
                  {{ item.shelf9.name }}
                </div>
                <div class="tr5 th_style">
                  {{ item.shelf10.name }}
                </div>
              </div>
              <div class="table_main_body">
                <div class="layers">
                  <div
                    class="layerData"
                    v-for="(layer, layerNum) in item['shelf' + (index + 1)]
                      .layer"
                    :key="layerNum"
                    :style="{
                      background:
                        layerNum % 2 == 0
                          ? 'rgba(255,255,255,0.1)'
                          : 'transparent',
                    }"
                  >
                    {{ layerNum + 1 }}
                  </div>
                </div>
                <div class="ld" v-for="s in 5" :key="s">
                  <div
                    class="layertrdata"
                    v-for="(layer, layerNum) in item['shelf' + (s - 0 + 5)]
                      .layer"
                    :key="layerNum"
                    :style="{
                      background:
                        layerNum % 2 == 0
                          ? 'rgba(255,255,255,0.1)'
                          : 'transparent',
                    }"
                  >
                    <div
                      class="tr2 tr"
                      v-for="(layerSample, k) in layer.sample"
                      :key="k"
                    >
                      <div class="iconText">
                        <el-tooltip
                          placement="top"
                          v-if="layerSample.status != 0"
                        >
                          <div slot="content">
                            试件编号:{{ layerSample.testCode }}<br />样品编号:{{
                              layerSample.sampleCode
                            }}<br />取样编号:{{ layerSample.sampleNoStr
                            }}<br />制件日期:{{ layerSample.fProductionDates
                            }}<br />工程部位:{{ layerSample.fProjectLocation }}
                          </div>
                          <div  class="h">
                            <img
                            :src="
                              layerSample.status == 1
                                ? notExpired
                                : layerSample.status == 2
                                ? test
                                : expired
                            "
                            alt=""
                          />
                          <div :style="{'color':layerSample.status == 1?'#58EC8E' : layerSample.status == 2?'#FFD456':'#FE5858'}">{{ k + 1 }}</div>

                          </div>
                         
                        </el-tooltip>
                        <div class="h" v-else >
                          <img
                            :src="k1"
                            alt=""
                          />
                          <div style="color:#A6BAC9">{{ k + 1 }}</div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style scoped lang="less">
@import "./index.less";
</style>
